<link rel="import" href="../../html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
<link rel="import" href="../shared_vars_css.html">

<dom-module id="cr-toggle">
  <template>
    <style>
      :host {
        --cr-toggle-checked-bar-color: var(--google-blue-600);
        --cr-toggle-checked-button-color: var(--google-blue-600);
        --cr-toggle-checked-ripple-color:
            rgba(var(--google-blue-600-rgb), .2);
        --cr-toggle-unchecked-bar-color: var(--google-grey-400);
        --cr-toggle-unchecked-button-color: white;
        --cr-toggle-unchecked-ripple-color:
            rgba(var(--google-grey-600-rgb), .15);
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        display: block;
        min-width: 34px;
        outline: none;
        position: relative;
        width: 34px;
      }

      @media (prefers-color-scheme: dark) {
        :host {
          --cr-toggle-checked-bar-color: var(--google-blue-300);
          --cr-toggle-checked-button-color: var(--google-blue-300);
          --cr-toggle-checked-ripple-color:
              rgba(var(--google-blue-300-rgb), .4);
          --cr-toggle-unchecked-bar-color: var(--google-grey-500);
          --cr-toggle-unchecked-button-color: var(--google-grey-300);
          --cr-toggle-unchecked-ripple-color:
              rgba(var(--google-grey-300-rgb), .4);
        }
      }
      /* Keep the prefers-color-scheme and [dark] rules the same. */
      :host([dark]) {
        --cr-toggle-checked-bar-color: var(--google-blue-300);
        --cr-toggle-checked-button-color: var(--google-blue-300);
        --cr-toggle-checked-ripple-color:
            rgba(var(--google-blue-300-rgb), .4);
        --cr-toggle-unchecked-bar-color: var(--google-grey-500);
        --cr-toggle-unchecked-button-color: var(--google-grey-300);
        --cr-toggle-unchecked-ripple-color:
            rgba(var(--google-grey-300-rgb), .4);
      }

      :host([disabled]) {
        cursor: initial;
        opacity: var(--cr-disabled-opacity);
        pointer-events: none;
      }

      #bar {
        background-color: var(--cr-toggle-unchecked-bar-color);
        border-radius: 8px;
        height: 12px;
        left: 3px;
        position: absolute;
        top: 2px;
        transition: background-color linear 80ms;
        width: 28px;
        z-index: 0;
      }

      :host([checked]) #bar {
        background-color: var(--cr-toggle-checked-bar-color);
        opacity: var(--cr-toggle-checked-bar-opacity, 0.5);
      }

      #knob {
        background-color: var(--cr-toggle-unchecked-button-color);
        border-radius: 50%;
        box-shadow: var(--cr-toggle-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, .4));
        display: block;
        height: 16px;
        position: relative;
        transition: transform linear 80ms, background-color linear 80ms;
        width: 16px;
        z-index: 1;
      }

      :host([checked]) #knob {
        background-color: var(--cr-toggle-checked-button-color);
        transform: translate3d(18px, 0, 0);
      }

      :host-context([dir=rtl]):host([checked]) #knob {
        transform: translate3d(-18px, 0, 0);
      }

      paper-ripple {
        --paper-ripple-opacity: 1;
        color: var(--cr-toggle-unchecked-ripple-color);
        height: var(--cr-toggle-ripple-diameter, 40px);
        left: 50%;
        outline: var(--cr-toggle-ripple-ring, none);
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: color linear 80ms;
        width: var(--cr-toggle-ripple-diameter, 40px);
      }

      :host([checked]) paper-ripple {
        color: var(--cr-toggle-checked-ripple-color);
      }

      :host-context([dir=rtl]) paper-ripple {
        left: auto;
        right: 50%;
        transform: translate(50%, -50%);
      }
    </style>
    <span id="bar"></span>
    <span id="knob"></span>
  </template>
  <script src="cr_toggle.js"></script>
</dom-module>
